<template>
  <el-config-provider :locale="zhCn">
    <div style="height: 100%; width: 100%">
      <router-view></router-view>

      <!-- 请求loading动画  z-index 998  -->
      <RequestLoading v-show="requestLoadingVisible"></RequestLoading>
    </div>

    <!-- 全局消息提示弹窗 -->
    <MessageAlert
      v-model:visible="alertVisible"
      :param="alertParam"
      @close="closeAlert"
    ></MessageAlert>
  </el-config-provider>
</template>

<script setup lang="ts">
import { onBeforeMount } from 'vue'
import { storeToRefs } from 'pinia'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import {
  useWindowSizeStore,
  useThemeStore,
  useUserStore,
} from '@/features/store/store'
import {
  useMessageAlertStore,
  useRequestLoadingStore,
} from '@/features/store/componentStore'
import { setRequestLoadingStore } from '@/request/request'

import MessageAlert from '@/components/MessageAlert/MessageAlert.vue'
import RequestLoading from '@/components/Loading/RequestLoading.vue'

// MessageAlert 组件全局状态
const { alertVisible, alertParam } = storeToRefs(useMessageAlertStore())
const { closeAlert } = useMessageAlertStore()

// RequestLoading 组件全局状态
const { requestLoadingVisible } = storeToRefs(useRequestLoadingStore())
onBeforeMount(() => {
  setRequestLoadingStore(useRequestLoadingStore())
})

//
//
// 初始化的一些配置
onBeforeMount(() => {
  // 初始化用户系统信息
  useUserStore().getUserInfo()
  // 初始化一下主题颜色
  useThemeStore().setTheme('theme-default')
  // 监听窗口大小变化
  useWindowSizeStore().watchWindowResize()
})
</script>

<style scoped lang="less">
.router {
  width: 100%;
  height: calc(100% - 32px);
  background-color: #ececec51;
  overflow: auto;
}
</style>
